<ion-header>
  <ion-toolbar>
      <ion-title>ion-avatar</ion-title>
      <!--<ion-button slot="end" size="small">浏览</ion-button>-->
  </ion-toolbar>
</ion-header>

<ion-content>
  <!--list组件开始-->
  <!--<ion-list>-->

  <!--<ion-item>-->

  <!--<ion-label> 元素1</ion-label>-->

  <!--<ion-icon name="arrow-forward-circle-outline"></ion-icon>-->
  <!--</ion-item>-->

  <!--<ion-item>-->
  <!--<ion-label> 元素2</ion-label>-->

  <!--<ion-icon name="body-outline"></ion-icon>-->
  <!--</ion-item>-->

  <!--<ion-item>-->
  <!--<ion-label> 元素3</ion-label>-->

  <!--<ion-button>加入</ion-button>-->
  <!--</ion-item>-->

  <!--</ion-list>-->
  <!--list组件结束-->

  <!--卡片组件开始-->
  <!--<ion-card>-->
  <!--<ion-card-header>-->
  <!--<ion-card-title>主标题</ion-card-title>-->
  <!--<ion-card-subtitle>副标题</ion-card-subtitle>-->
  <!--</ion-card-header>-->
  <!--<ion-card-content>-->
    <!--我还是个孩子我还是个孩子我还是个孩子我还是个孩子我还是个孩子我还是个孩子我还是个孩子我还是个孩子-->
  <!--</ion-card-content>-->
  <!--</ion-card>-->

  <!--<ion-list>-->
  <!--<ion-item>-->

  <!--<ion-label> 联系电话</ion-label>-->

  <!--<ion-icon name="arrow-forward-circle-outline"></ion-icon>-->
  <!--</ion-item>-->

  <!--<ion-item>-->
  <!--<ion-label> 收货地址</ion-label>-->

  <!--<ion-icon name="body-outline"></ion-icon>-->
  <!--</ion-item>-->

  <!--<ion-item>-->
  <!--<ion-label> 元素3</ion-label>-->

  <!--<ion-button>加入</ion-button>-->
  <!--</ion-item>-->

  <!--</ion-list>-->

  <!--</ion-card-content>-->

  <!--</ion-card>-->

  <!--卡片组件结束-->
  <!--复选框开始-->
  <!--<ion-list>-->
  <!--<ion-item >-->
  <!--<ion-label>选项1</ion-label>-->
  <!--<ion-checkbox slot="end" ></ion-checkbox>-->
  <!--</ion-item>-->

  <!--<ion-item >-->
  <!--<ion-label>选项2</ion-label>-->
  <!--<ion-checkbox slot="end" ></ion-checkbox>-->
  <!--</ion-item>-->

  <!--<ion-item >-->
  <!--<ion-label>选项3</ion-label>-->
  <!--<ion-checkbox slot="end" ></ion-checkbox>-->
  <!--</ion-item>-->

  <!--</ion-list>-->
  <!--复选框结束-->


  <!--单选框开始-->
  <!--<ion-list>-->
    <!--<ion-radio-group value="biff">-->
      <!--<ion-list-header>-->
        <!--<ion-label>你的兴趣爱好</ion-label>-->
      <!--</ion-list-header>-->

      <!--<ion-item>-->
        <!--<ion-label>游泳</ion-label>-->
        <!--<ion-radio slot="start" value="biff"></ion-radio>-->
      <!--</ion-item>-->

      <!--<ion-item>-->
        <!--<ion-label>跑步</ion-label>-->
        <!--<ion-radio slot="start" value="griff"></ion-radio>-->
      <!--</ion-item>-->

      <!--<ion-item>-->
        <!--<ion-label>唱歌</ion-label>-->
        <!--<ion-radio slot="start" value="buford"></ion-radio>-->
      <!--</ion-item>-->

      <!--<ion-item>-->
        <!--<ion-label>跳舞</ion-label>-->
        <!--<ion-radio slot="start" value="fan"></ion-radio>-->
      <!--</ion-item>-->
    <!--</ion-radio-group>-->
  <!--</ion-list>-->
  <!--单选框结束-->

  <!--下拉选择开始-->
  <!--<ion-list>-->
    <!--<ion-item>-->
      <!--<ion-label>Gender</ion-label>-->
      <!--<ion-select placeholder="Select One" multiple="true" cancelText="取消" okText="确定">-->
        <!--<ion-select-option value="f">Female</ion-select-option>-->
        <!--<ion-select-option value="m">Male</ion-select-option>-->
        <!--<ion-select-option value="pepperoni">Pepperoni</ion-select-option>-->
        <!--<ion-select-option value="pineapple">Pineapple</ion-select-option>-->
        <!--<ion-select-option value="sausage">Sausage</ion-select-option>-->
        <!--<ion-select-option value="Spinach">Spinach</ion-select-option>-->
      <!--</ion-select>-->
    <!--</ion-item>-->
  <!--</ion-list>-->
  <!--下拉选择结束-->

  <!--按钮组件开始-->
  <!--<ion-list>-->
    <!--<ion-item>-->
      <!--<ion-label>按钮组件</ion-label>-->
      <!--<ion-button color="danger" expand="block" shape="round" size="large">按钮组件</ion-button>-->
    <!--</ion-item>-->
  <!--</ion-list>-->

  <!--按钮组件结束-->

  <!--chip组件开始-->
  <!--<ion-chip color="danger">-->
  <!--<ion-label>用户名</ion-label>-->
  <!--<ion-icon name="person-outline"></ion-icon>-->
  <!--</ion-chip>-->
  <!--<ion-chip>-->
    <!--<ion-label>Default</ion-label>-->
  <!--</ion-chip>-->

  <!--<ion-chip>-->
    <!--<ion-label color="secondary">Secondary Label</ion-label>-->
  <!--</ion-chip>-->

  <!--<ion-chip color="secondary">-->
    <!--<ion-label color="dark">Secondary w/ Dark label</ion-label>-->
  <!--</ion-chip>-->

  <!--<ion-chip>-->
    <!--<ion-icon name="pin"></ion-icon>-->
    <!--<ion-label>Default</ion-label>-->
  <!--</ion-chip>-->

  <!--<ion-chip>-->
    <!--<ion-icon name="heart" color="dark"></ion-icon>-->
    <!--<ion-label>Default</ion-label>-->
  <!--</ion-chip>-->

  <!--<ion-chip>-->
    <!--<ion-label>Button Chip</ion-label>-->
    <!--<ion-icon name="close-circle"></ion-icon>-->
  <!--</ion-chip>-->

  <!--<ion-chip>-->
    <!--<ion-icon name="pin" color="primary"></ion-icon>-->
    <!--<ion-label>Icon Chip</ion-label>-->
    <!--<ion-icon name="close"></ion-icon>-->
  <!--</ion-chip>-->

  <!--<ion-chip>-->
    <!--<ion-avatar>-->
      <!--<img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">-->
    <!--</ion-avatar>-->
    <!--<ion-label>Avatar Chip</ion-label>-->
    <!--<ion-icon name="close-circle"></ion-icon>-->
  <!--</ion-chip>-->
  <!--chip组件结束-->

  <!--图形组件-->
  <!--<ion-avatar>-->
    <!--<ion-img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1629668646,2513692460&fm=26&gp=0.jpg">-->

    <!--</ion-img>-->
  <!--</ion-avatar>-->
  <!--<ion-avatar>-->
    <!--<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1629668646,2513692460&fm=26&gp=0.jpg">-->
  <!--</ion-avatar>-->

  <!--<ion-chip>-->
    <!--<ion-avatar>-->
      <!--<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1629668646,2513692460&fm=26&gp=0.jpg">-->
    <!--</ion-avatar>-->
    <!--<ion-label>Chip Avatar</ion-label>-->
  <!--</ion-chip>-->

  <!--<ion-item>-->
    <!--<ion-avatar slot="start">-->
      <!--<img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1629668646,2513692460&fm=26&gp=0.jpg">-->
    <!--</ion-avatar>-->
    <!--<ion-label>Item Avatar</ion-label>-->
  <!--</ion-item>-->
  <!--图形组件-->

  <!--输入组件开始-->
  <!--<ion-item>-->
    <!--<ion-label position="stacked">用户名</ion-label>-->
    <!--<ion-input placeholder="在这里输入用户名"></ion-input>-->
  <!--</ion-item>-->


  <!--<ion-item>-->
    <!--<ion-label position="stacked">留言内容</ion-label>-->
    <!--<ion-textarea placeholder="在这里输入留言内容" rows="4"></ion-textarea>-->
  <!--</ion-item>-->

  <!--<ion-item>-->
    <!--<ion-label position="stacked">出生日期</ion-label>-->
    <!--<ion-datetime displayFormat="YYYY-MM-DD" value="2012-12-15T13:47:20.789"></ion-datetime>-->

  <!--</ion-item>-->
  <!--输入组件结束-->

  <!--栅格化开始-->
  <!--<ion-grid>-->
    <!--<ion-row>-->
      <!--<ion-col size="4">-->
        <!--<ion-avatar>-->
          <!--<ion-img src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1629668646,2513692460&fm=26&gp=0.jpg">-->

          <!--</ion-img>-->
        <!--</ion-avatar>-->

      <!--</ion-col >-->
      <!--<ion-col size="8">-->
        <!--<ion-row>-->
          <!--<ion-col>姓名</ion-col>-->
          <!--<ion-col>杨幂</ion-col>-->
        <!--</ion-row>-->

        <!--<ion-row>-->
          <!--<ion-col>身高</ion-col>-->
          <!--<ion-col>1.68</ion-col>-->
        <!--</ion-row>-->
        <!--<ion-row>-->
          <!--<ion-col>体重</ion-col>-->
          <!--<ion-col>60</ion-col>-->
        <!--</ion-row>-->

      <!--</ion-col>-->
    <!--</ion-row>-->
    <!--<ion-row>-->
      <!--<ion-col>-->
        <!--<ion-button expand="full" color="danger">加为好友</ion-button>-->
      <!--</ion-col>-->
    <!--</ion-row>-->

  <!--</ion-grid>-->
  <!--栅格化结束-->

  <ion-button (click)="presentActionSheet()">actionsheet</ion-button>
  <ion-button (click)="presentAlert()">警告框</ion-button>
  <ion-button (click)="presentAlertConfirm()">确认框</ion-button>
  <ion-button (click)="presentToast()">显示提示信息</ion-button>
  <ion-button (click)="presentToastByService()">封装提示信息测试</ion-button>
</ion-content>

<ion-footer>
  <ion-item>
    <ion-input placeholder="在这里输入消息"></ion-input>
    <ion-button>发送</ion-button>
  </ion-item>
  页脚区
</ion-footer>